<template>
  <div class="index">
    <!-- 顶部轮播图 +导航-->
    <div class="banner">
      <div class="swiperImg">
        <el-carousel :interval="2000" arrow="always" height="400px" autoplay>
          <el-carousel-item v-for="item in swiperDate" :key="item">
            <img :src="item.imgUrl" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="header-nav">
        <div>
          <span><a href="#hot">热门赛事</a></span>
        </div>
        <div>
          <span><a href="#detail">赛事动态</a></span>
        </div>
        <div>
          <span><a @click="toBottom">关于我们</a></span>
        </div>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="item">
      <!-- 热门赛事 -->
      <div class="hot" id="hot">
        <div class="title">
          <span class="event-title">热门赛事</span>
          <router-link to="/race-list" class="many">查看更多 >>></router-link>
        </div>
        <div class="event">
          <UserRace
            v-for="(item, index) in data.hotData"
            :key="index"
            :raceId="item.contestId"
            :imgUrl="item.contestProfilePath"
            :name="item.name"
            :publisher="item.publisher"
            :start_time="item.createTime"
          />
          <!-- <el-skeleton style="width: 200px" v-for="n in 4" :key="n" :loading="loading">
            <template #template>
              <el-skeleton-item
                variant="image"
                style="width: 200px; height: 180px"
              />
              <div style="padding: 14px">
                <el-skeleton-item variant="p" style="width: 50%" />
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-items: space-between;
                  "
                >
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </template>
          </el-skeleton> -->
        </div>
      </div>
      <!-- 赛事动态 -->
      <div class="detail" id="detail">
        <div class="title">
          <span class="event-title">赛事动态</span>
          <router-link to="/race-news" class="many">查看更多 >>></router-link>
        </div>
        <div class="event-detail">
          <!-- 赛事动态组件 -->
          <RaceNewItem
            v-for="(item, index) in data.dynamicData"
            :key="index"
            :data="item"
            size="small"
          />
          <el-skeleton :rows="5" animated :loading="loading2"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import UserRace from "@/components/UserRace.vue";
import { GetHot, GetDynamics } from "@/api/front/contest";
import RaceNewItem from "./RaceNews/RaceNewItem.vue";

//跳转
const loading = ref(true);
const loading2 = ref(true);
//存放数据
let data = reactive({
  hotData: [],
  dynamicData: [],
});

if (sessionStorage.getItem("hotData")) {
  data.hotData = JSON.parse(sessionStorage.getItem("hotData"));
}
if (sessionStorage.getItem("dynamicData")) {
  data.dynamicData = JSON.parse(sessionStorage.getItem("dynamicData"));
}

//获取比赛数据
const getData = async () => {
  loading.value = true;
  try {
    //热门赛事数据
    const res1 = await GetHot();
    console.log("res1", res1);
    data.hotData = res1.data.slice(0, 4);
    sessionStorage.setItem("hotData", JSON.stringify(data.hotData));
    console.log("hotdata", data.hotData);
    ////赛事动态数据
    const res2 = await GetDynamics();
    console.log("res2", res2);
    data.dynamicData = res2.data.slice(0, 3);
    sessionStorage.setItem("dynamicData", JSON.stringify(data.dynamicData));
    console.log("Dynamicdata", data.dynamicData);
    if (res1.data.length !== 0) {
      loading.value = false;
    }
    if (res2.data.length !== 0) {
      loading2.value = false;
    }
  } catch (err) {
    console.log("err", err);
  }
};
onMounted(() => {
  window.scrollTo(0, 0)
  getData();
});
// const DefaultImg =
//   "https://img0.baidu.com/it/u=3364111863,1779585219&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=499";

const swiperDate = [
  {
    imgUrl:
      "https://publicqn.saikr.com/2023/09/25/contest6511027e7e8442.553193131695613600951.png",
    alt: "轮播图描述",
  },
  {
    imgUrl:
      "https://publicqn.saikr.com/2023/09/18/contest6507eb82a20be5.594664931695017871906.png",
    alt: "轮播图描述",
  },
  {
    imgUrl:
      "https://publicqn.saikr.com/2023/06/16/contest648bcfbb5a04c1.122757331686884296371.png",
    alt: "轮播图描述",
  },
  {
    imgUrl:
      "https://publicqn.saikr.com/2023/09/20/contest650a727f69b800.197031861695183489383.png?imageView2/2/w/2160",
    alt: "轮播图描述",
  },
  {
    imgUrl:
      "https://publicqn.saikr.com/2023/08/18/contest64df4133d3d551.424172211692352841390.png?imageView2/2/w/2160",
    alt: "轮播图描述",
  },
];

const toBottom = () => {
  window.scrollTo(0, document.body.scrollHeight);
};

</script>
<style scoped lang="scss">
.index {
  .banner {
    position: relative;

    .swiperImg {
      height: 400px;
      // background-color: #99a9bf;

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .header-nav {
      width: 1000px;
      height: 50px;
      background-color: #ffffff;
      border-radius: 20px;
      box-shadow: 0px 3px 6px #bdbdbd;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      bottom: -55px;

      span {
        font-size: 25px;
        font-weight: 550;
        cursor: pointer;
        a {
          text-decoration: none;
          color: #2c3e50;
        }
      }
    }
  }

  .item {
    width: 1100px;
    margin: 0 auto;
    margin-top: 40px;
    // background-color: skyblue;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 400;
      margin-top: 20px;
      margin-bottom: 10px;

      .event-title {
        font-size: 30px;
        font-weight: 600;
      }

      .many {
        color: #000;
        font-size: 16px;
        text-decoration: none;
        &:hover {
          color: #22bfa7;
          border-bottom: solid 1px #22bfa7;
        }
      }
    }

    .event {
      width: 1060px;
      display: flex;
      margin: auto;
      justify-content: space-between;

      .user-race {
        width: 250px;
        flex-shrink: 0;
      }

      .event-first {
        width: 200px;
        cursor: pointer;

        .image {
          position: relative;
        }

        img {
          border-radius: 10px;
        }

        .icon {
          background-color: #e95757;
          border-radius: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: 3px;
          right: 3px;
        }

        .text {
          line-height: 25px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-clamp: 2;
          -webkit-line-clamp: 2;
        }

        .author-time {
          font-size: 12px;
          display: flex;
          justify-content: space-between;
        }
      }
    }

    .event-detail {
      position: relative;
      box-sizing: border-box;
      padding: 0 20px;

      .detail-first {
        // background-color: lightblue;
        width: 1060px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        cursor: pointer;

        img {
          border-radius: 10px;
        }

        .paragraph {
          width: 900px;
          margin-left: 10px;
          margin-top: 5px;
          line-height: 25px;

          .text-top {
            font-weight: 550;
          }

          .text-bottom {
            text-indent: 2em;
            margin-top: 15px;
            //文本显示两行·，超过省略号
            white-space: nowrap;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
          }
        }
      }
    }
  }
}

.foot {
  margin-top: 50px;
  height: 100px;
  position: relative;
}
</style>
